{% extends 'base.html' %}
	
	{% block title_suffix %}
	    | Add questions
	{% endblock %}

{% block content %}
    <h1>Add More Questions</h1>
    <form action="." method="post" onsubmit="selectAllOptions('extra_questions');" onLoad="loada()">
	    {% csrf_token %}
    	{% if available_questions %}
        	<select id="available questions" multiple="multiple">
        		<option value="" selected="selected">Add questions later</option>
        		{% for question in available_questions %}
        			<option value="{{ question.id }}">{{ question }}</option>
        		{% endfor %}
      	 	</select><br />
      	 	<input type="button" onclick="AddToList('available questions', 'extra_questions');" value="Add question">
    	{% else %}
        <p>There are no questions in the database.</p>
    	{% endif %}
    	<select id="extra_questions" name="extra_questions" multiple="multiple"></select>
    	<input type="submit" id="submit" value="Add questions"/>
    </form>
    
    
{% endblock %}

{% block footer %}
    <p>Footer</p>
{% endblock %}

{% block scripts %}
	<script>
		function AddToList(fromList, toList ) {
			var index=document.getElementById(fromList).selectedIndex;
			var elOpt = document.getElementById(fromList).options[index];
			var elSel = document.getElementById(toList);
		
			var elOptNew = document.createElement('option');
			elOptNew.text = elOpt.text;
			elOptNew.value = elOpt.value;

		
			try {
			  elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
			  elSel.add(elOptNew); // IE only
			}
		}
	</script>
	
	<script>
		function selectAllOptions(selStr){
		  var selObj = document.getElementById(selStr);
		  for (var i=0; i<selObj.options.length; i++) {
		    selObj.options[i].selected = true;
		  }
		}
	</script>
	
	<script>
		$(function loada() {
			var key = sessionStorage.getItem('key');
			alert(key);
		});
	</script>
	
	
{% endblock %}
